<template>
  <m-box title="物料配套" size="small" class="material-matching">
    <div class="m-content">
      <el-progress
        type="circle"
        :width="133"
        :stroke-width="16"
        :percentage="moRate"
        :color="colors"
      >
        <template #default="{ percentage }">
          <span class="percentage-value">{{ percentage }}%</span>
          <span class="percentage-label">工单齐套率</span>
        </template>
      </el-progress>
      <el-progress
        type="circle"
        :width="133"
        :stroke-width="16"
        :percentage="timelyIssuanceRate"
        :color="colors"
      >
        <template #default="{ percentage }">
          <span class="percentage-value">{{ percentage }}%</span>
          <span class="percentage-label">发料及时率</span>
        </template>
      </el-progress>
    </div>
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import moment from 'moment'
import top10Echart from '@/views/WarehouseBoard/components/top10Echart/index.vue'

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
]
// 齐套率
const moRate = ref(0)
// 及时率
const timelyIssuanceRate = ref(0)

const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/GetAssembleAnalysisRateReport')
    moRate.value = res.moRate
    timelyIssuanceRate.value = res.timelyIssuanceRate
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
// 暴露方法
defineExpose({
  init
})
</script>
<style lang="less" scoped>
.material-matching {
  ::v-deep(.m-box__body) {
    .dv-border-box-7 {
      .border-box-content {
        .m-content {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  color: #fff;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #fff;
}
</style>
